<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻译功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #0a0e1f 0%, #1a253d 50%, #243551 100%);
            color: white;
            min-height: 100vh;
        }
        .test-container {
            background: rgba(26, 37, 61, 0.8);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 245, 255, 0.2);
        }
        .language-btn {
            padding: 8px 16px;
            margin: 5px;
            border: 1px solid #00f5ff;
            border-radius: 4px;
            cursor: pointer;
            background: transparent;
            color: white;
        }
        .language-btn.active {
            background: #00f5ff;
            color: #000;
        }
        .test-item {
            border: 1px solid rgba(0, 245, 255, 0.3);
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .loading {
            color: #00f5ff;
            font-style: italic;
        }
        .error {
            color: #ff4757;
        }
        .success {
            color: #2ed573;
        }
    </style>
</head>
<body>
    <h1>🌐 翻译功能测试</h1>
    
    <div class="test-container">
        <h2>语言选择</h2>
        <button class="language-btn active" onclick="setLanguage('zh')">🇨🇳 中文</button>
        <button class="language-btn" onclick="setLanguage('en')">🇺🇸 English</button>
        <button class="language-btn" onclick="setLanguage('pt')">🇵🇹 Português</button>
        <div id="currentLanguage">当前语言: 中文</div>
    </div>

    <div class="test-container">
        <h2>翻译测试</h2>
        <button onclick="runTest()">开始测试</button>
        <div id="testResults"></div>
    </div>

    <script>
        let currentLanguage = 'zh';
        
        const testTexts = [
            '跨境政策咨询平台',
            '全球政策概览',
            '智能咨询',
            '政策查询',
            '政策分析',
            '欢迎回来',
            '今天是美好的一天，让我们开始工作吧！'
        ];

        function setLanguage(lang) {
            currentLanguage = lang;
            
            // 更新按钮状态
            document.querySelectorAll('.language-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 更新显示
            const langNames = {
                'zh': '中文',
                'en': 'English',
                'pt': 'Português'
            };
            document.getElementById('currentLanguage').textContent = `当前语言: ${langNames[lang]}`;
        }

        async function translateText(text, targetLang) {
            if (targetLang === 'zh') return text;
            
            const appId = '20250627002391301';
            const appKey = 'ZPM1rdKh_etnWFatwYR0';
            const salt = Date.now().toString();
            const query = text;
            const from = 'zh';
            const to = targetLang;
            
            // 生成简单签名
            const sign = btoa(appId + query + salt + appKey).replace(/[^a-zA-Z0-9]/g, '').substring(0, 32);
            
            try {
                const url = `https://fanyi-api.baidu.com/api/trans/vip/translate?q=${encodeURIComponent(query)}&from=${from}&to=${to}&appid=${appId}&salt=${salt}&sign=${sign}`;
                
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.trans_result && data.trans_result.length > 0) {
                    return data.trans_result[0].dst;
                }
                
                throw new Error('翻译失败: ' + (data.error_msg || '未知错误'));
            } catch (error) {
                console.error('翻译错误:', error);
                return text; // 返回原文
            }
        }

        async function runTest() {
            const resultsDiv = document.getElementById('testResults');
            resultsDiv.innerHTML = '<div class="loading">正在测试翻译功能...</div>';
            
            let html = '';
            
            for (const text of testTexts) {
                try {
                    const translated = await translateText(text, currentLanguage);
                    html += `
                        <div class="test-item">
                            <div><strong>原文:</strong> ${text}</div>
                            <div class="success"><strong>翻译:</strong> ${translated}</div>
                        </div>
                    `;
                } catch (error) {
                    html += `
                        <div class="test-item">
                            <div><strong>原文:</strong> ${text}</div>
                            <div class="error"><strong>错误:</strong> ${error.message}</div>
                        </div>
                    `;
                }
            }
            
            resultsDiv.innerHTML = html;
        }

        // 页面加载时自动测试
        window.onload = () => {
            console.log('页面加载完成，准备测试翻译功能');
        };
    </script>
</body>
</html> 